<template>
  <div id="indexUsers">
    <el-card style="margin-bottom:20px;">
      <el-input @keydown.enter.native="getUsers" placeholder="请输入内容" v-model="fieldVal">
        <el-select v-model="field" style="width:100px" slot="prepend" placeholder="请选择">
          <el-option label="用户名" value="username"></el-option>
          <el-option label="邮箱" value="email"></el-option>
          <el-option label="手机" value="phone"></el-option>
        </el-select>
        <el-button @click="getUsers" slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </el-card>
    <el-card header="用户管理">
      <el-table :data="users" v-loading="loading">
        <el-table-column prop="id" width="80" label="编号">
        </el-table-column>
        <el-table-column prop="username" width="150" label="用户名" align="center">
        </el-table-column>
        <el-table-column prop="gender" width="100" label="性别" align="center">
        </el-table-column>
        <el-table-column prop="phone" width="150" label="手机" align="center">
        </el-table-column>
        <el-table-column prop="email" width="200" label="邮箱" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <div slot-scope="{row}">
            <el-button type="primary" @click.stop="edlVisible=true,eformUsers=row" icon="el-icon-edit">编辑</el-button>
            <el-button @click="del(row.id)" type="danger">删除</el-button>
          </div>
        </el-table-column>
      </el-table>
      <div style="margin-top:20px">
        <!-- 
                      background表示背景色
                      prev表示向前一页的按钮
                      next表示向后一页的按钮
                      pager表示是否放页数 
                      total表示总共有多少条纪录，page-size表示一页中放多少条纪录
                      current-page表示高亮显示第几页
                   -->
        <el-pagination background layout="sizes,prev, pager, next" :total="total" :page-size="pageSize" :page-sizes="[5,10,20,50]" @size-change="sizeChange" :current-page.sync="currentPage" @current-change="getUsers">
        </el-pagination>
      </div>
    </el-card>
    <!-- 点击编辑按钮出现的页面 -->
    <el-dialog title="编辑用户" :visible="edlVisible" width="40%" :show-close="false">
      <el-form :model="eformUsers" ref="eformUsers" label-width="120px" :rules="rules">
        <el-form-item label="编号" prop="id">
          <el-input v-model="eformUsers.id"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="eformUsers.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="eformUsers.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="eformUsers.phone"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio v-model="eformUsers.gender" label="f">女</el-radio>
          <el-radio v-model="eformUsers.gender" label="m">男</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer">
              <el-button @click="ecancel">取 消</el-button>
              <el-button type="primary" @click="edit">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        edlVisible: false,
        loading: false,
        currentPage: 1,
        pageSize: 5,
        total: 0,
        users: [],
        field: "",
        fieldVal: "",
        eformUsers: {
          id: "",
          username: "",
          email: " ",
          phone: " ",
          avatar: " ",
          gender: " "
        },
        rules: {
          username: [{
            validator: (rule, val, callback) => {
              this.axios.get(`/users/exists/username/${val}`).then(ret => {
                if (ret.data == true) {
                  callback(new Error("该名称已被注册"));
                } else {
                  callback();
                }
              });
            },
            trigger: "change"
          }]
        }
      };
    },
    created() {
      this.getUsers();
    },
    methods: {
      //编辑
      edit() {
        this.$refs.editformMenus.validate((flag) => {
          if (flag) {
            this.axios.put(`/users/edit/${this.eformUsers.id}`, {
              username: this.eformUsers.username,
              email: this.eformUsers.email,
              phone: this.eformUsers.phone,
              gender: this.eformUsers.gender,
            }).then(() => {
              this.$message.success("编辑成功");
              this.edlVisible = false;
              this.$refs.eformUsers.resetFields();
              this.getUsers();
            })
          }
        })
      },
      //编辑里面的取消
      ecancel() {
        this.edlVisible = false;
        this.$refs.eformUsers.resetFields();
      },
      //删除
      del(id) {
        this.$confirm("此操作将永久删除，是否继续？", "提示").then(() => {
          this.axios
            .delete(`/users/del/${id}`)
            .then(() => {
              this.$message.success("删除成功");
              this.getUsers();
            })
            .catch(() => {
              this.$message.error("删除失败");
            });
        });
      },
      sizeChange(size) {
        this.pageSize = size;
        this.getUsers();
      },
      //获取
      getUsers() {
        this.loading = true;
        this.axios
          .get("/users", {
            params: {
              currentPage: this.currentPage,
              pageSize: this.pageSize,
              field: this.field,
              fieldVal: this.fieldVal
            }
          })
          .then(res => {
            this.loading = false;
            this.users = res.data.rows;
            this.total = res.data.total;
            this.pageSize = res.data.pageSize;
            this.currentPage = res.data.currentPage;
          })
          .catch(() => {});
      }
    }
  };
</script>

